<template>
  <router-view />

  <div
    ref="maskEl"
    :style="{display: showVerify ? 'block' : 'none'}"
    class="mask"
  ></div>
  <CheckVersion />
</template>

<script setup>
import { onMounted, onBeforeMount, ref } from 'vue'
import { useAccountStore } from './stores/account'
import { log } from './utils/log.js'
import db from './utils/localstorage'
import CheckVersion from './components/CheckVersion.vue'

const accountStore = useAccountStore()

const showVerify = ref(false)
const maskEl = ref(null)

onBeforeMount(async () => {
  const token = db.get('ACCESS_TOKEN')
  if (token) {
    await accountStore.getUser()
  }
})

onMounted(() => {
  log('__BUILD_TIME__', __BUILD_TIME__)
  window.__BUILD_TIME__ = __BUILD_TIME__
})
</script>

<style lang="less" scoped>
.mask {
  background: transparent;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 10000;
}
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
